<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Friendship % Calculator</title>

    <link rel="stylesheet" href="globalStyles.css">

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap" rel="stylesheet">
</head>

<body>
    <!-- Its all about my school percentage Calculator -->

    <section>
        <div class="form">
            <div class="header">
                <h1>
                    Friendship Calci
                </h1>
                <h5>It's all about my School days Friendship % Calculator which we used to kill time.. Sooo NOSTALGIC !
                </h5>
            </div>

            <h4>Let's Play Yours!</h4>
            <div class="inputs">
                <input name="name1" placeholder="Your Name" id="name1" />
                <input name="name2" placeholder="Friend Name" id="name2" />
            </div>

            <button onclick="calculate()" class="btn">
                Find &#128516;
            </button>

            <div class="result" style="visibility: hidden;">
            <h1 class="resultHead">

            </h1>

        </div>

        <div class="footer">
            <a href="algo.html">How it Works ?</a>
            <p>Developed by <a href="https://github.com/Hariiikrishnan">Hk!</a></p>
        </div>
        </div>
    </section>


    <script src="index.js"></script>
</body>

</html>